<template>
  <div class="main">
    <div class="message">
      <p class="name">{{ wallType[id].name }}</p>
      <p class="slogan">{{ wallType[id].slogan }}</p>
    </div>

    <div class="labels">
      <ul>
        <li :class="{ liselected: liIndex == -1 }" @click="changeIndex(-1)">
          全部
        </li>
        <li
          v-for="(item, index) in label[id]"
          :key="index"
          @click="changeIndex(index)"
          :class="{ liselected: liIndex == index }"
        >
          {{ item }}
        </li>
      </ul>
    </div>

    <main class="mainbody">
      <div class="blocks">
        <my-note-vue
          v-for="(item, i) in note.data"
          :key="i"
          :note="item"
          class="note"
        ></my-note-vue>
      </div>
    </main>
  </div>
</template>

<script>
import { wallType, label } from "@/utils/data";
import { ref } from "vue";
import MyNoteVue from "@/components/MyNote/MyNote.vue";
import { note } from "@/mock/index";
export default {
  components: {
    MyNoteVue,
  },
  setup() {
    let id = ref(0); // 留言墙id为0 之后做事件使得id为1
    let liIndex = ref(-1); // 当前选中状态小li的下标
    const changeIndex = (index) => {
      liIndex.value = index;
    };
    return {
      wallType,
      label,
      id,
      liIndex,
      changeIndex,
      note,
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  margin-top: 52px;
  // width: 1500px;
  // margin: auto;
  .message {
    padding-top: 46px;
    .name {
      font-size: 56px;
      color: $gray-1;
      font-weight: 600;
    }
    .slogan {
      font-size: 14px;
      color: $gray-3;
      padding-bottom: 44px;
    }
  }

  .labels {
    padding: 0 400px;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;

      li {
        font-size: $font-14;
        color: $gray-3;
        // transition: all 0.3s;
      }
      .liselected {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 28px;
        border: 1px solid rgba(32, 32, 32, 1);
        border-radius: 14px;
        color: $gray-1;
      }
    }
  }

  .mainbody {
    padding-top: 30px;
    width: 99%;
    margin: auto;
    box-sizing: border-box;
    .blocks {
      width: calc(100% + 12px);
      margin-left: -12px;
      display: flex;
      flex-wrap: wrap;
      .note {
        margin-bottom: 10px;
        margin-left: 12px;
      }
    }
  }
}
</style>
